<template>
  <a-card :bordered="false" class="withdrawal">
    <div class="theknightSearch table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="5" :sm="5">
            <a-form-item label="订单号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入订单号" v-model="queryParam.sorderNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="服务商" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入服务商" v-model="queryParam.orderNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="会员手机号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入会员手机号" v-model="queryParam.mobile"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-button type="primary" @click="getList" icon="search">搜索</a-button>
            <a-button style="margin-left: 8px" @click="getList">刷新</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <section class="table">
      <a-table ref="table" size="middle" bordered rowKey="objectSid" :columns="columns" :pagination="ipagination"
        @change="changePage" :dataSource="List" :loading="loading">
        <span slot="action" slot-scope="record">
          <a @click="details(record)">查看详情</a>
          <a-divider type="vertical" />
          <!-- <a @click="assigned(record)">订单指派</a> -->
          <a-divider type="vertical" v-if="record.type==1" />
          <a @click="recommend(record,1)" v-if="record.type==1&&!record.isHot||record.isHot=='0'">推荐</a>
          <a @click="recommend(record,0)" v-if="record.type==1&&record.isHot&&record.isHot!='0'">不推荐</a>
        </span>
      </a-table>
    </section>
    <a-modal v-model="showDetails" title="订单详情" @ok="showDetails=false">
      <a-form-model :labelCol="{span: 4}" :wrapperCol="{span: 14, offset: 1}">
        <a-form-model-item label="订单号">
          <label>{{chooseOrder.sorderNo}}</label>
        </a-form-model-item>
        <a-form-model-item label="状态">
          <label v-if="chooseOrder.status==1">待付款</label>
          <label v-if="chooseOrder.status==2">已付款</label>
          <label v-if="chooseOrder.status==3">进行中</label>
          <label v-if="chooseOrder.status==4">已完成</label>
          <label v-if="chooseOrder.status==5">已取消</label>
        </a-form-model-item>
        <a-form-model-item label="价格">
          <label>{{chooseOrder.officialPrice}}</label>
        </a-form-model-item>
        <a-form-model-item label="服务类型">
          <label>{{chooseOrder.category_dictText}}</label>
        </a-form-model-item>
        <a-form-model-item label="服务名称">
          <label>{{chooseOrder.officialName}}</label>
        </a-form-model-item>
        <a-form-model-item label="服务图片">
          <label><img  style="width:100px;margin-left:5px;" :src="chooseOrder.imgUrl" alt=""></label>
        </a-form-model-item>
        <a-form-model-item label="服务描述">
          <label>{{chooseOrder.officialDescription}}</label>
        </a-form-model-item>
        <a-form-model-item label="下单人">
          <label>{{chooseOrder.memberName}}</label>
        </a-form-model-item>
        <a-form-model-item label="下单时间">
          <label>{{chooseOrder.created}}</label>
        </a-form-model-item>
        <a-form-model-item label="服务商">
          <label>{{chooseOrder.providerName}}</label>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal v-model="showAssigned" title="订单指派" @ok="OkshowAssigned">
      <a-form-model :labelCol="{span: 5}" :wrapperCol="{span: 14, offset: 1}">
        <a-form-model-item label="服务商手机号">
          <a-input v-model="assignRequest" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>
<script>
import {
  postAction,
  getAction
} from '@/api/manage'
import store from '@/store'
export default {
  data() {
    return {
      loading: false,
      showDetails: false,
      showAssigned: false,
      queryParam: {
          pageNo: 1,
          pageSize: 10,
          sorderNo:"",
          mobile:""
        },
      List: [{
        objectSid: '123456',
        created: '2022-7-8 12:22',
        price: '123',
        category: '商家'
      }],
      chooseOrder: {
        imageUrl: ''
      }, // 选中的数据
      assignRequest: "", //订单指派请求参数
      isBranchFlag: false,// 当前登录用户是否分站用户
      columns: [
        {
          title: '订单编号',
          align: "center",
          dataIndex: 'sorderNo',
        },
        {
          title: '状态',
          align: "center",
          dataIndex: 'status',
          customRender: (value, row, index) => {
              let obj;
              if (value == 1) {
                obj = '待付款'
              } else if (value == 2) {
                obj = '已付款'
              } else if (value == 3) {
                obj = '进行中'
              } else if (value == 4) {
                obj = '已完成'
              } else if (value == 5) {
                obj = '已取消'
              }
              return obj;
            }
        },
        {
          title: '推荐',
          align: "center",
          dataIndex: 'isHot',
          customRender: (value, row, index) => {
              let obj;
              if (value&&value!='0') {
                obj = '推荐'
              } else{
                obj = '不推荐'
              } 
              return obj;
            }
        },
        {
          title: '价格',
          align: "center",
          dataIndex: 'price',
        },
        {
          title: '下单人',
          align: "center",
          dataIndex: 'memberName',
        },
        {
          title: '服务商',
          align: "center",
          dataIndex: 'providerName',
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'created',
        }, {
          title: '操作', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' }
        },
      ],
      //标记页数；页码
      ipagination: {
        current: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        total: 0
      },

      url: {
        list:"/orderBase/list",
        changeHot:'orderBase/updateOrderStatus'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    assigned() {
      this.showAssigned = true
    },
    OkshowAssigned() {

    },
    recommend(e,x){
      this.loading = true;
      postAction(this.url.changeHot,{
        objectSid:e.objectSid,
        isHot:x
      }).then((res) => {
          console.log(res);
          this.loading = false;
          if (res.success) {
            this.getList()
          }
        })
    },
    // 查看详情
    details(e) {
      this.chooseOrder = e
      this.showDetails = true
    },
    getList() {
      this.loading = true;
        getAction(this.url.list, this.queryParam).then((res) => {
          console.log(res);
          this.loading = false;
          if (res.success) {
            this.List = res.result.records;
            this.ipagination.total = res.result.total;
          }
        })
    },  
    onClose() {
    },
    // 代理列表改变分页
    changePage(pagination) {
      console.log(pagination);
      this.ipagination.current = pagination.current
      this.queryParam.pageNo = pagination.current;
      this.queryParam.pageSize = pagination.pageSize;
      this.getList();
    },
  }
}
</script>
<style lang="less" scoped>
.modal {
  .modeal-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
  }
  button {
    position: absolute;
    right: 50px;
  }
  .pooltable {
    padding-top: 50px;
  }
}

.withdrawal {
  .time {
    margin-top: 30px;
  }
  .theknightSearch {
    padding: 15px 10px;
    .ant-form-item {
      width: 100%;
    }
  }
  .table-page-search-wrapper .ant-form-inline .ant-form-item {
    margin-bottom: 0px !important;
  }
}
</style>